<template>
  <el-dialog
    title="个人信息"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    width="700px"
    @close="close"
    :close-on-click-modal="false"
    center
  >
    <div class="info-con">
      <el-form
        style="width:100%"
        ref="userform"
        :inline-message="false"
        :status-icon="true"
        :model="userform"
        :rules="rules"
        label-width="160px"
        size="large"
        :hide-required-asterisk="true"
        class="ser-form ope-form"
      >
        <el-row>
          <el-col :span="18">
            <el-form-item label="用户名：">
              {{ userform.userName || "-" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="真实姓名：" prop="name">
              <el-input
                v-model="userform.name"
                v-filterSpecialChar
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="warn-info mark ml-30"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="电话号码：" prop="mobile">
              <el-input
                v-model="userform.mobile"
                v-filterSpecialChar
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="warn-info mark ml-30"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="电子邮箱：" prop="email">
              <el-input
                v-model="userform.email"
                v-filterSpecialChar
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="warn-info mark ml-30"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="备注：">
              <el-input
                type="textarea"
                maxlength="200"
                show-word-limit
                v-filterSpecialChar
                :rows="3"
                placeholder="请输入内容"
                v-model="userform.remark"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        @click="close" >取 消</el-button
      >
      <el-button
        @click="save" >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import {
  validresName,
  validresPhone,
  validreSmail,
  validresMask,
} from '@/util/customRules';
export default {
  data() {
    return {
      dialogVisible: false,
      userform: {},
      rules: {
        name: [
          { required: true, message: '请输入用户姓名', trigger: 'blur' },
          { validator: validresName, trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validresPhone, trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { validator: validreSmail, trigger: 'blur' },
        ],
        remark: [
          // {
          //   min: 1,
          //   max: 200,
          //   message: "不超过200个字",
          //   trigger: "blur"
          // },
          { validator: validresMask, trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    loginInfo() {
      return this.$store.getters.getLoginInfo;
    },
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    show(options) {
      this.dialogVisible = true;
    },
    open() {
      this.loadData();
    },
    loadData() {
      this.loading = true;

      this.$api.head
        .getUserInfo({ userId: this.loginInfo.id })
        .then((res) => {
          if (res.data.code === 200) {
            this.userform = JSON.parse(JSON.stringify(res.data.data));
            this.loading = false;
          } else {
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    reset() {
      this.userform = JSON.parse(JSON.stringify(this.myInfo));
      this.$refs.userform.clearValidate();
    },
    save(call) {
      this.userform.id = this.userform.userId;
      this.$refs.userform.validate((valid) => {
        if (valid) {
          this.$api.head.updateUser(this.userform).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: res.data.data,
                center: true,
              });
              call && call();
            } else {
              this.$message({
                type: 'error',
                message: res.data.data,
                center: true,
              });
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.info-con {
  width: 100%;
}
</style>
